<template>
	<el-col :span="24">
	  <h1 style="margin-left:40%">
	    已用车位/总车位
	  </h1>
	  <el-statistic :value="count" style="margin-left:47%">
	    <template #title>
	    </template>
	    <template #suffix>/50</template>
	  </el-statistic>
	  
	  <el-row :gutter="10">
	    <el-col :span="20">
	      <el-col>
	        <el-row :span="10">
	          <Red /><h1>已占用车位</h1>
			</el-row>
			<el-row>
			  <el-col :span="6" v-for="(item, index) in main.used" :key="index">
			      <p class="车位">{{item }}</p>
			    </el-col>
	        </el-row>
			
	        <el-row :span="10" style="margin-top:5px">
				<Green /><h1>空闲中车位</h1><br />
			</el-row>
			<el-row>
	          <el-col :span="6" v-for="(item, index) in main.kong" :key="index">
	              <p class="车位">{{item }}</p>
	            </el-col>
	        </el-row>
			
	        <el-row :span="10">
	          <Yellow /><h1>审核中车位</h1>
			</el-row>
			<el-row>
			  <el-col :span="6" v-for="(item, index) in main.wait" :key="index">
			      <p class="车位">{{item }}</p>
			    </el-col>
	        </el-row>
	      </el-col>
	    </el-col>
	  </el-row>
	</el-col>


</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage,ElMessageBox ,ElTable} from 'element-plus'
import Green from '@/components/icons/CommunityIcon/greencar'
import Red from '@/components/icons/CommunityIcon/redcar'
import Yellow from '@/components/icons/CommunityIcon/yellowcar'
import {_axios,post} from '@/plugins/axios'
import url from './util'
const count=ref(0)//占用
const count1=ref(0)//空闲
const count2=ref(0)//审核
const t=ref(0)
const x=ref(0)
const y=ref(0)
const main=reactive({
	id:null,
	content:'',
	parkingId:'',
	username:'',
	carNumber:'',
	occupied:'',
	tableData: [],// 初始化为空数组
		  kong:[],
		  used:[],
		  wait:[]
})
getTableData()
function getTableData () {
  _axios.request({
    url: '/parkingSpace/list',
    method: 'get'
  }).then(response => {
    const data = response.data;
    count.value = 0; // 重置 count
    data.forEach(item => {
      if (item.occupied === 3) {
		main.used.push(item.content);
        count.value++; 
      }
	  if (item.occupied === 0||item.occupied === 2) {
	  		main.kong.push(item.content);
	    count1.value++; 
		
	  }
	  if (item.occupied === 1) {
	  		main.wait.push(item.content);
	    count2.value++; 
		
	  }
    });
  })
}
</script>

<style>
</style>